<template>
	<div class="main-box">
		<h1>当前展示的轮播图</h1>
		<!-- 当前小程序正在展示的轮播图 -->
		<el-carousel :interval="5000" arrow="always" class="crousel-sty">
			<el-carousel-item v-for="item in 4" :key="item">
				<h3>{{ item }}</h3>
			</el-carousel-item>
		</el-carousel>
		<!-- 轮播数据 -->
		<div class="data-box">
			<h1 style="border: 1px solid black;">轮播图数据</h1>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column label="id">
					<template slot-scope="scope">
						<!-- scope.$index 即为每一行的索引 -->
						<span>{{ scope.$index }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="date" label="日期" width="180">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="address" label="地址">
				</el-table-column>
				<!-- 滑块开关 -->
				<el-table-column prop="istrue" label="显示/隐藏">
					<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
					</el-switch>
				</el-table-column>
				<!-- 操作一栏 -->
				<el-table-column prop="operation" label="操作" width="180" style="border: 1px solid gray;">
					<el-button type="primary" icon="el-icon-edit" circle @click="test()"></el-button>
					<el-button type="danger" icon="el-icon-delete" circle></el-button>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		// 轮播图管理
		name: "crousel",
		data() {
			return {
				//默认显示
				value: false,
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
					istrue: true
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄',
					istrue: true
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄',
					istrue: true

				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄',
					istrue: true
				}]
			}
		},
		methods: {
			test(row) {
				console.log("调用test：")
				console.log(row)

			}
		}
	}
</script>

<style scoped>
	.main-box {
		text-align: center;
		position: relative;
	}

	/* 走马灯 */
	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
		width: 35vw !important;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
		width: 35vw !important;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
		width: 35vw !important;
	}

	.crousel-sty {
		width: 35vw !important;
		position: absolute;
		left: 25vw;
	}

	.data-box {
		/* position: absolute; */
		border: 1px solid blue;
		/* display: block; */
		margin-top: 45vh;
	}

	/*  */
</style>